<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type=text/javascript src="../vue.js"></script>
		<script type=text/javascript src="../vuex.js"></script>
	</head>
	<body>
		<div id="app">
			<child :model-value='"test"' :cname="'xy'"></child>
		</div>
		<script>
		
		const {h, ref, computed, onMounted, reactive} = Vue;
		const {createStore, mapState} = Vuex;
		
		// 创建一个新的 store 实例
		
		const store = createStore({
		  state () {
		    return {
		      count: 0
		    }
		  },
		  mutations: {
		    increment (state) {
		      state.count++
		    }
		  }
		})
		
		const child = {
			props: ['modelValue','cname'],
			setup(props, { expose, emit }) {
			  console.log("props = ",props);
		      
			  onMounted(function tt(){
				  console.log("the child is onMounted");
			  })
			  /*
			  const handleClick = () => {
			  	console.log("store = ",store)
				
			  }
			  return {handleClick}
			  */
			},
			methods:{
				handleClick:function() {
					console.log("store = ",this.$store)
					this.$store.commit('increment')
				}
			},
			data(){
				return {
					localCount:9
				}
			},
			computed: mapState({
			    // 箭头函数可使代码更简练
			    count: state => state.count,
			
			    // 传字符串参数 'count' 等同于 `state => state.count`
			    countAlias: 'count',
			
			    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
			    countPlusLocalState (state) {
			      return state.count + this.localCount
			    }
			}),
			template:`<div @click="handleClick">{{modelValue}}</div>
			<div>{{count}}</div>
			<div>{{countAlias}}</div>
			<div>{{countPlusLocalState}}</div>`
		}
		
		const App = {
		    setup(){
		        // 为目标对象创建一个响应式对象
				
				onMounted(() => {
					console.log("the parent is onMounted");
					
				})
				
		        
		    },
			components:{
				child
			},
			methods:{
				
			}
		};
		const app = Vue.createApp(App);
		
		// 将 store 实例作为插件安装
	    app.use(store)
		app.mount('#app');
		
		
		</script>
	</body>
</html>
